<template>
  <div class="home-container">
    <van-nav-bar class="page-nav-bar">
      <template #right>
        <van-button
          type="info"
          size="small"
          round
          icon="search"
          class="search-button"
          >搜索</van-button
        >
      </template>
    </van-nav-bar>
    <van-tabs class="channels-tabs" v-model:active="active">
      <van-tab title="推荐">内容 1</van-tab>
      <van-tab title="标签 2">内容 2</van-tab>
      <van-tab title="标签 3">内容 3</van-tab>
      <van-tab title="标签 4">内容 4</van-tab>
      <van-tab title="标签 5">内容 5</van-tab>
      <van-tab title="标签 6">内容 6</van-tab>
    </van-tabs>
  </div>
</template>

<script >
import { ref } from 'vue';

export default {
  setup() {
    const active = ref(0);
    return { active };
  },
};

</script>

<style scoped>
.home-container .search-button {
  width: 300px;
  height: 30px;
  background-color: #5babfb;
  border: none;
  font-size: 18px;
  color: white;
}
.van-tabs__wrap .van-tabs__nav--line .van-tab--grow{
  min-width: 120px;
  border-right: 1px solid #edeff3;
  font-size: 16px;
  color: #777;
}
.van-tabs__wrap .van-tab--active{
  color: red;
}
.van-tabs__wrap  .van-tabs__nav--line{
  background-color: #3296fa;
  width: 20px;
  height: 6px;
}
</style>
